﻿button{
	transition-property: all;
    transition-duration: 0.3s;
}
div{
	transition-property: all;
    transition-duration: 0.3s;
}
#page1{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 90%;
	height: 90%;
}
#time{
	text-align: center;
	font-size: 30px;
	margin: 5%;
	height: fit-content;
}
#search-frame{
	height:10%;
	width: 100%;
	margin: auto;
	
}
#search-way{
	display: inline-block;
	width: 20%;
	height: 90%;
	border: none;
	border-radius: 5px;
	background:rgba(178,178,178,0.90);
}
::-webkit-input-placeholder { /* Edge */
	color: white;
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: white;
  }
  
  ::placeholder {
	color: white;
  }
#search{
	outline:none;
	text-align: center;
	width: 30%;
	height: 90%;
	display: inline-block;
	border: none;
	background: rgba(178,178,178,0.50);
	text-align: center;
	border-radius: 40px;
	margin-left: 30%;
	box-shadow:3px 3px 2px rgba(0,0,0,0.5);
	transform: all 0.6s;
}
#search:hover{
	text-align: center;
	width: 45%;
	height: 90%;
	display: inline-block;
	border: none;
	background: rgba(255,255,255,0.6);
	text-align: center;
	border-radius: 30px;
	margin-left: 22%;
	
}
#search:focus{
	text-align: center;
	width: 55%;
	height: 90%;
	display: inline-block;
	border: none;
	background: rgba(255,255,255,1);
	text-align: center;
	border-radius: 10px;
	margin-left: 17%;
	border-style: none;
	
}

#enter{
	outline:none;
	border: none;
	width: fit-content;
	height: fit-content;
	/*background: rgba(0,132,255,0.90);*/
	background: rgba(255, 255, 255, 0.8);
	box-shadow:3px 3px 2px rgba(0,0,0,0.5);
	display: block;
	margin: 2% auto;
	font-size: 25px;
	padding:5px 20px;
	border-radius: 30px;
}

#way-list{
    background:black;
    width:60px;
    height:100px;
    position:absolute;
    display:none
}
#add-like{
	outline:none;
	border: none;
	width: fit-content;
	height: fit-content;
	/*background: rgba(0, 132, 255, 0.9);*/
	background: rgba(255, 255, 255, 0.8);
	box-shadow:3px 3px 2px rgba(0,0,0,0.5);
	padding-bottom: 5px;
	display: block;
	margin: 1%;
	font-size:25px;
	margin: auto;
	border-radius: 30px;
}

.like{
	border: none;
	width: 7%;
	overflow: hidden;
	background: rgba(0,132,255,0.9);
	display:inline-block;
	margin: 1%;
	font-size:30px;
	
	border-radius: 10px;	
}
#search-way-list {
	display: inline-block;
	width: 5%;
	height: 90%;
	border: none;
	border-radius: 20px;
	/*background: rgba(178, 178, 178, 0.9);*/
	background: rgba(178,178,178,0.50);
	-webkit-appearance: none;
	text-align:center;
	font-size:20px;
	outline: none;
	
}
#search-suggestion{
	margin: 5px auto;
	border-radius: 10px;
	height: fit-content;
	background-color: lightblue;
	/*display: none;*/
	
}
.search-suggestiong-result{
	width:100%;
	height:fit-content;
	font-size:20px;
	background-color:none;
	padding:1% 5%;
	border-radius:10px;
	font-size:15px;
	text-align:left;
	border:none;

}
.search-suggestiong-result:hover {
	background-color:Highlight;
}
.swlb {
	display: block;
	width: 90%;
	text-align:right;
	
}
.href{
	font-size: 1px;
}
.name{
	position: relative;
	bottom: 0;
	font-size: 10px;
}
.sign{
	font-size: 40px;
	background-color: darkgray;
	border-radius: 100px;
	width: 60%;
	height: 60%;
	margin: auto;
	text-align: center;
}